<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_Vue的动态数据</title>
  <!-- 
  在 Vue 3 中，动态数据是指组件中可以响应用户输入、API 请求或其他事件而变化的数据。这些动态数据通过 Vue 的响应式系统进行管理，确保当数据发生变化时，视图能够自动更新。
  1. 响应式数据
  在 Vue 3 中，使用  `reactive`  和  `ref`  函数来创建响应式数据。
  - reactive：用于创建响应式对象。适用于需要响应式的复杂数据结构，如对象和数组。
  import { reactive } from 'vue';

    const state = reactive({
      count: 0,
      items: []
    });
  - ref：用于创建响应式的基本数据类型（如数字、字符串等）。返回的是一个对象，包含一个  `value`  属性。
  import { ref } from 'vue';

    const count = ref(0);
  2. 数据绑定

  在 Vue 3 中，可以使用模板语法将动态数据绑定到视图中。通过  `{{ }}`  插值语法或指令（如  `v-bind` ）将数据与 DOM 元素关联。
  <template>
    <div>
      <p>当前计数：{{ count }}</p>
      <button @click="increment">增加</button>
    </div>
  </template>

  <script>
  import { ref } from 'vue';

  export default {
    setup() {
      const count = ref(0);

      const increment = () => {
        count.value++;
      };

      return {
        count,
        increment,
      };
    },
  };
  </script>
  3. 计算属性

  计算属性是基于响应式数据计算得出的值。它们会根据依赖的数据变化而自动更新。
  import { computed, ref } from 'vue';

  export default {
    setup() {
      const count = ref(0);
      
      const doubleCount = computed(() => count.value * 2);

      return {
        count,
        doubleCount,
      };
    },
  };
  4. 侦听器

  侦听器（watchers）用于观察响应式数据的变化，并在变化时执行特定的操作。
  import { ref, watch } from 'vue';

  export default {
    setup() {
      const count = ref(0);

      watch(count, (newValue, oldValue) => {
        console.log(`计数从 ${oldValue} 变为 ${newValue}`);
      });

      return {
        count,
      };
    },
  };
  5. 组合式 API

  Vue 3 引入了组合式 API，使得管理动态数据更加灵活和模块化。通过  `setup`  函数，可以将数据、计算属性和侦听器放在同一个地方，提升代码的可读性和可维护性。

  总结
  - 响应式数据：使用  `reactive`  和  `ref`  创建响应式数据。
  - 数据绑定：通过模板语法将动态数据与视图关联。
  - 计算属性：基于响应式数据计算得出的值，自动更新。
  - 侦听器：观察数据变化并执行特定操作。
  - 组合式 API：提升动态数据管理的灵活性和可维护性。
  -->
</head>
<body>

  <div id="app"></div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1. 创建Vue应用
    const app = Vue.createApp({
      // 插值语法
      template: `
        <h3>{{ message }}</h3>
        <ul>
          <li v-for="movie in movies" :key="movie">{{ movie }}</li>
        </ul>
      `,
      data: function() {
        return {
          message: 'Hello Vue 3!',
          movies: ['电影1', '电影2', '电影3', '电影4'],
        }
      }
    })

    // 2. 挂载Vue应用
    app.mount('#app')

  </script>
  
</body>
</html>